<template>
  <div class="appWrapper">
    <div
        class="appInner"
        :class="
        store && store.getters && store.getters.themeInfo.className
          ? store.getters.themeInfo.className
          : null
      "
    >
      <NavigationBar />

      <LeftNavigationBar />
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import LeftNavigationBar from "./components/LeftNavigationBar.vue";
import NavigationBar from "./components/NavigationBar.vue";
import { onMounted, ref } from "vue";

export default {
  components: { LeftNavigationBar, NavigationBar },

  setup() {
    let store = useStore();
    store.commit("initState");

    //这里直接获取本地缓存的值，如果有值，就直接commit 修改组件状态
    let themeSwitchIndex = JSON.parse(localStorage.getItem("themeSwitchIndex"));
    console.log("获取缓存变量", themeSwitchIndex);
    if (themeSwitchIndex && themeSwitchIndex.id) {
      store.commit("setThemeSwitchIndex", themeSwitchIndex.id);
    }

    const dialogVisible = ref(false);
    const context = ref("");
    onMounted(() => {

    });

    return {
      dialogVisible,
      store,
      context,
    };
  },
};
</script>


<style lang="scss" scoped>
// 夜间模式配色
.darkMode {
  --bgColor1: #222;
  --bgboxShadowColor1: #11111144;
  --bgColor2: #2a2a2a;
  --bgboxShadowColor2: #44444444;
  --bgColor3: #444;
  --themeColor1: #3F48EF;
  --themeColor2: #0487F9;
  --themeTextColor: #eee;
  --textColor1: #eee;
  --textColor2: #ccc;
  --textColor3: #999;
  --textColor4: #777;
  --textColor5: #353535;
  --dColor1: #2A2A2A;
  --dColor2: #302e37;
  --borderColor: #333;
}
// 日间模式配色
.lightMode {
  --bgColor1: #f5f5f5;
  --bgboxShadowColor1: #cccccc44;
  --bgColor2: #eee;
  --bgboxShadowColor2: #dddddd44;
  --bgColor3: #ddd;
  --themeColor1: #3F48EF;
  --themeColor2: #0487F9;
  --themeTextColor: #eee;
  --textColor1: #222;
  --textColor2: #444;
  --textColor3: #666;
  --textColor4: #888;
  --textColor5: #d5d5d5;
  --dColor1: #EEEEEEFF;
  --dColor2: #e0d8f8;
  --borderColor: #eee;
}

// 样式选择器， 后续所有的模式 都可以写在这里，  数量多的时候再抽离
:deep(.appInner) {
  background: var(--bgColor1);
  color: var(--textColor1);

  /*
  变量定义区域
  需要定背景色五级、主题色五级、文本三级(正文、标题、提醒) 颜色
backgroundColor
  */

  /*
  方案：
  1、app.vue 基于类名修改变量值；
  2、子组件全部位置，都使用变量进行颜色复制；

  为什么不在这个页面直接修改：
  1、如果是单个文件直接修改样式，日后新建组件，还要找回来app.vue，有点累赘。

  执行步骤：
  1、【完成】检查css mode修改之后， 子组件的变量能否生效 能否生效
  2、检查父子组件变量是否能够传递；
  3、将所有颜色类名都找出来，替换为使用变量;
  4、
  */

  .el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
    background-color: var(--themeColor1) !important;
    color: var(--themeTextColor);
  }
}
</style>
